//   银行流水录入：BankFlowEntry

import React, { useState } from 'react'
import 'antd/dist/antd.css'
import './index.scss'
import axios from 'axios'
import { Select, Form, Input, DatePicker, Space, Button, Modal, Table, Popconfirm, message } from 'antd'
import { QuestionCircleOutlined } from '@ant-design/icons';




// 表格数据列表对象

export default function BankFlowEntry() {
    const { Column } = Table;

    const { RangePicker } = DatePicker

    const [stat, getState] = useState(false);

    //表格数据
    const [data, setData] = useState([
        {
            id: 1,
            key: 1,
            date: '2018/01/06',
            voucher: '0',
            remark: '本金还款',
            flow_type: '转入',
            debit_amount: '130,564.00',
            credit_amount: '485.25',
            account: '156256156588888',
            account_name: '深圳市51贷款有限公司',
            remarks: '111',
        },
        {
            id: 2,
            key: 2,
            date: '2018/01/08',
            voucher: '0',
            remark: '本息还款',
            flow_type: '转入',
            debit_amount: '130,564.00',
            credit_amount: '485.25',
            account: '156256156588888',
            account_name: '深圳市51贷款有限公司',
            remarks: '111',
        },
        {
            id: 3,
            key: 3,
            date: '2018/01/06',
            voucher: '0',
            remark: '利息还款',
            flow_type: '转入',
            debit_amount: '130,564.00',
            credit_amount: '485.25',
            account: '156256156588888',
            account_name: '深圳市51贷款有限公司',
            remarks: '111',
        },
        {
            id: 4,
            key: 4,
            date: '2019/01/06',
            voucher: '0',
            remark: '提现手续费',
            flow_type: '转出',
            debit_amount: '130,564.00',
            credit_amount: '485.25',
            account: '156256156588888',
            account_name: '深圳市51贷款有限公司',
            remarks: '111',
        },
        {
            id: 5,
            key: 5,
            date: '2019/03/06',
            voucher: '0',
            remark: '发放贷款',
            flow_type: '转出',
            debit_amount: '130,564.00',
            credit_amount: '485.25',
            account: '156256156588888',
            account_name: '深圳市51贷款有限公司',
            remarks: '111',
        },
        {
            id: 6,
            key: 6,
            date: '2020/11/06',
            voucher: '0',
            remark: '罚息',
            flow_type: '转出',
            debit_amount: '130,564.00',
            credit_amount: '485.25',
            account: '156256156588888',
            account_name: '深圳市6贷款有限公司',
            remarks: '111',
        },
        {
            id: 7,
            key: 7,
            date: '2018/01/06',
            voucher: '0',
            remark: '本金还款',
            flow_type: '转入',
            debit_amount: '130,564.00',
            credit_amount: '485.25',
            account: '156256156588888',
            account_name: '深圳市51贷款有限公司',
            remarks: '111',
        },
        {
            id: 8,
            key: 8,
            date: '2018/01/06',
            voucher: '0',
            remark: '本金还款',
            flow_type: '转入',
            debit_amount: '130,564.00',
            credit_amount: '485.25',
            account: '156256156588888',
            account_name: '深圳市51贷款有限公司',
            remarks: '111',
        },
        {
            id: 9,
            key: 9,
            date: '2018/01/06',
            voucher: '0',
            remark: '本金还款',
            flow_type: '转入',
            debit_amount: '130,564.00',
            credit_amount: '485.25',
            account: '156256156588888',
            account_name: '深圳市51贷款有限公司',
            remarks: '111',
        },
        {
            id: 10,
            key: 10,
            date: '2018/01/06',
            voucher: '0',
            remark: '本金还款',
            flow_type: '转入',
            debit_amount: '130,564.00',
            credit_amount: '485.25',
            account: '156256156588888',
            account_name: '深圳市51贷款有限公司',
            remarks: '111',
        },
        {
            id: 11,
            key: 11,
            date: '2018/01/06',
            voucher: '0',
            remark: '本金还款',
            flow_type: '转入',
            debit_amount: '130,564.00',
            credit_amount: '485.25',
            account: '156256156588888',
            account_name: '深圳市51贷款有限公司',
            remarks: '111',
        },
        {
            id: 12,
            key: 12,
            date: '2018/01/06',
            voucher: '0',
            remark: '本金还款',
            flow_type: '转入',
            debit_amount: '130,564.00',
            credit_amount: '485.25',
            account: '156256156588888',
            account_name: '深圳市51贷款有限公司',
            remarks: '111',
        }
    ]);

    const [form] = Form.useForm();
    // const [add, setAdd] = useState({});

    //导入弹框数据
    const formData = {
        account: '',//账号
        account_name: '',//账户名称
        bank: '',//开户银行
        branch: '',//开户行名称
        currency: '',//币种
        state: '',//是否启用
        type: '',//账户类型（1.基本账户 2.辅助账户 3.专业账户）
        update_date: '',//更行时间
    }



    const daoru = () => {
        getState(true)
    }


    const handleOk = () => {
        getState(false);

    };

    const handleCancel = () => {
        getState(false);
    };

    // 删除按钮
    function confirm(e) {
        console.log('删除成功', e);
        message.success('删除成功！');
        setData(data.filter(item => { return item.key !== data.key }))
    }
    function cancel(e) {
        console.log(e);
        message.error('删除失败！');
    }

    return (
        <div className="bankFlowEntry">
            {/* 头部搜索及输入框 */}
            <div className="bank_head">
                <Form layout="inline">

                    <Form.Item className="select">
                        <Select placeholder="选择发生账号">
                            <Select.Option value="demo">对方账号</Select.Option>
                            <Select.Option value="demo">借方账号</Select.Option>
                        </Select>
                    </Form.Item>

                    {/* <Form.Item> */}
                    {/* <Input placeholder="借方账号" /> */}
                    {/* </Form.Item> */}

                    <Form.Item className="zhaiyao">
                        <Select placeholder="摘要">
                            <Select.Option value="1">本金还款</Select.Option>
                            <Select.Option value="2">本息还款</Select.Option>
                            <Select.Option value="3">利息还款</Select.Option>
                            <Select.Option value="4">提现手续费</Select.Option>
                            <Select.Option value="5">发放贷款</Select.Option>
                            <Select.Option value="6">提前还款手续费</Select.Option>
                            <Select.Option value="7">罚息</Select.Option>
                        </Select>
                    </Form.Item>

                    <Form.Item>
                        <Space direction="vertical" size={12}>
                            <RangePicker />
                        </Space>
                    </Form.Item>

                    <Form.Item className="chaxun">
                        <Button type="primary">查询</Button>
                    </Form.Item>
                </Form>
            </div>

            {/* 表格主体内容 */}
            <div className='bank_body'>
                {/* 表格头 */}
                <div className="bank_body_head">
                    <p className="text">数据列表</p>

                    <div className="body_head_right">

                        <Button type="primary" onClick={daoru}>导入</Button>
                        <Button type="primary">导出</Button>
                    </div>
                </div>
                {/* 表格主体 */}
                <Table dataSource={data}>
                    <Column title="日期" dataIndex="date" key="date" align='center' />
                    <Column title="凭证号" dataIndex="voucher" key="voucher" align='center' />
                    <Column title="摘要" dataIndex="remark" key="ramark" align='center' />
                    <Column title="转入/转出" dataIndex="flow_type" key="flow_type" align='center' />
                    <Column title="借方发生额" dataIndex="debit_amount" key="debit_amount" align='center' />
                    <Column title="贷方发生额" dataIndex="credit_amount" key="credit_amount" align='center' />
                    <Column title="发生账户" dataIndex="account" key="account" align='center' />
                    <Column title="账户户名" dataIndex="account_name" key="account_name" align='center' />
                    <Column title="备注" dataIndex="remarks" key="remarks" align='center' />
                    <Column align='center'
                        title="操作" key="caozuo"
                        render={(text) => (
                            <Space size='middle'>
                                <Button>编辑</Button>
                                
                                <Popconfirm title="确认要删除吗？" onConfirm={confirm} onCancel={cancel}>
                                    <a href='#'>删除</a>
                                </Popconfirm>

                                {/* <Popconfirm title="确认要删除吗？" onConfirm={() => setData(data.filter(item => { return item.key !== record.key })) } onCancel={cancel}>
                                    <a href='#'>删除</a>
                                </Popconfirm> */}

                            </Space>
                        )}
                    />
                </Table>
            </div>

            {/* 导入弹框 */}
            <Modal className='daoru' title='录入银行流水' visible={stat} onOk={handleOk}
                onCancel={handleCancel} okText='确认' cancelText='取消' width='800px' height='600px'>
                <Form form={form} initialValues={formData} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
                    <Form.Item name={''} label='日期：'>
                        <DatePicker />
                    </Form.Item>

                    <Form.Item label=' 凭证号：'>
                        <Input placeholder="请输入凭证号" style={{ width: '400px' }} />
                    </Form.Item>

                    <Form.Item label='摘要： '>
                        <Select placeholder="请选择摘要" style={{ width: '400px' }}>
                            <Select.Option value="1">本金还款</Select.Option>
                            <Select.Option value="2">本息还款</Select.Option>
                            <Select.Option value="3">利息还款</Select.Option>
                            <Select.Option value="4">提现手续费</Select.Option>
                            <Select.Option value="5">发放贷款</Select.Option>
                            <Select.Option value="6">提前还款手续费</Select.Option>
                            <Select.Option value="7">罚息</Select.Option>
                        </Select>
                    </Form.Item>

                    <Form.Item label='流水发生方式：'>
                        <Select style={{ width: '260px' }}>
                            <Select.Option value="1">转入</Select.Option>
                            <Select.Option value="2">转出</Select.Option>
                        </Select>
                    </Form.Item>

                    <Form.Item label='贷方发生额：'>
                        <Input style={{ width: '400px' }} placeholder="0.00" />
                    </Form.Item>

                    <Form.Item label='转出账户：'>
                        <Select style={{ width: '400px' }} placeholder="请选择摘要">
                            <Select.Option value="demo">1111</Select.Option>
                            <Select.Option value="demo">2222</Select.Option>
                        </Select>
                    </Form.Item>

                    <Form.Item label='备注：'>
                        <Input style={{ width: '400px' }} showCount maxLength={50} />
                    </Form.Item>
                </Form>
            </Modal>

        </div>
    )
}
